<template>
  <f7-messagebar
    :placeholder="placeholder"
    ref="messagebar"
    :attachments-visible="attachmentsVisible"
    :sheet-visible="sheetVisible"
    class="messagebar_box"
    @blur="handleBlur()"

  >
    <f7-link
      
      slot="inner-start"
      @click="sheetVisible = !sheetVisible"
    >
      <svg-icon iconClass="emoj" />
    </f7-link>
    <f7-link
      
      slot="inner-end"
      @click="sendMessage"
    >
      <svg-icon iconClass="send" />
    </f7-link>
    <f7-messagebar-attachments>
      <f7-messagebar-attachment
        v-for="(image, index) in attachments"
        :key="index"
        :image="image"
        @attachment:delete="deleteAttachment(image)"
      ></f7-messagebar-attachment>
    </f7-messagebar-attachments>
    <f7-messagebar-sheet>
      <f7-messagebar-sheet-image
        v-for="(image, index) in images"
        :key="index"
        :image="image"
        :checked="attachments.indexOf(image) >= 0"
        @change="handleAttachment"
      ></f7-messagebar-sheet-image>
    </f7-messagebar-sheet>
  </f7-messagebar>
</template>
<script>
export default {
  data() {
      return {
        attachments: [],
        sheetVisible: false,
        typingMessage: null,
        images: [
          'https://cdn.framework7.io/placeholder/cats-300x300-1.jpg',
          'https://cdn.framework7.io/placeholder/cats-200x300-2.jpg',
          'https://cdn.framework7.io/placeholder/cats-400x300-3.jpg',
          'https://cdn.framework7.io/placeholder/cats-300x150-4.jpg',
          'https://cdn.framework7.io/placeholder/cats-150x300-5.jpg',
          'https://cdn.framework7.io/placeholder/cats-300x300-6.jpg',
          'https://cdn.framework7.io/placeholder/cats-300x300-7.jpg',
          'https://cdn.framework7.io/placeholder/cats-200x300-8.jpg',
          'https://cdn.framework7.io/placeholder/cats-400x300-9.jpg',
          'https://cdn.framework7.io/placeholder/cats-300x150-10.jpg',
        ],
        
      };
    },
    computed: {
      attachmentsVisible() {
        const self = this;
        return self.attachments.length > 0;
      },
      placeholder() {
        const self = this;
        return self.attachments.length > 0 ? 'Add comment or Send' : 'Message';
      },
    },
    mounted() {
      const self = this;
      self.$f7ready(() => {
        self.messagebar = self.$refs.messagebar.f7Messagebar;
      });
    },
    methods: {
      
      deleteAttachment(image) {
        const self = this;
        const index = self.attachments.indexOf(image);
        self.attachments.splice(index, 1)[0]; // eslint-disable-line
      },
      handleAttachment(e) {
        const self = this;
        const index = self.$$(e.target).parents('label.checkbox').index();
        const image = self.images[index];
        if (e.target.checked) {
          // Add to attachments
          self.attachments.unshift(image);
        } else {
          // Remove from attachments
          self.attachments.splice(self.attachments.indexOf(image), 1);
        }
      },
      sendMessage() {
        const self = this;
        const text = self.messagebar.getValue().replace(/\n/g, '<br>').trim();
        const messagesToSend = [];
        self.attachments.forEach((attachment) => {
          messagesToSend.push({
            image: attachment,
          });
        });
        if (text.trim().length) {
          messagesToSend.push({
            text,
          });
        }
        if (messagesToSend.length === 0) {
          return;
        }

        // Reset attachments
        self.attachments = [];
        // Hide sheet
        self.sheetVisible = false;
        // Clear area
        self.messagebar.clear();
        // Focus area
        if (text.length) self.messagebar.focus();
        // Send message
        // self.messagesData.push(...messagesToSend);
        console.log(...messagesToSend);
        this.$emit('messageBarSend',text);
              
      },
      handleBlur(){
        this.$emit('messageBarBlur',this.messagebar.getValue().replace(/\n/g, '<br>').trim());
      },
      focusMessageBar(){
        this.$refs.messagebar.focus()
      }
    },
}
</script>
<style lang="scss" scoped>
.messagebar_box{
  position: fixed;
  bottom: 0;
}
</style>
